<template>
  <div class="app-container">
    <!-- 查询表单 -->
    <el-form :model="queryParams" ref="queryRef" :inline="true">
      <el-form-item label="载体项目" prop="nr">
        <el-input
          v-model="queryParams.nr"
          placeholder="请输入载体项目"
          clearable
          style="width: 200px"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 需要生成账单的载体列表 -->
    <el-table
      v-loading="loading"
      :data="ztBillList"
      border
      highlight-current-row
      style="margin-bottom: 16px"
    >
      <el-table-column label="费用计算" align="center">
        <template #default="scope">
          <span v-if="scope.row.dflx == 1">单电表计费</span>
          <span v-if="scope.row.dflx == 2">电表计费+容量电费</span>
          <span v-if="scope.row.dflx == 3">电表计费+服务费</span>
          <span v-if="scope.row.dflx == 4">电表计费+容量+服务费</span>
        </template>
      </el-table-column>
      <el-table-column prop="nr" label="载体项目" align="center" />

      <el-table-column label="操作" align="center" width="360">
        <template #default="scope">
          <el-button type="primary" link size="small" @click="confirmFee(scope.row,1)">
            生成电表电费
          </el-button>
          <el-button type="primary" link size="small" @click="confirmFee(scope.row,2)">
            生成容量费
          </el-button>
              <el-button type="primary" link size="small" @click="confirmFee(scope.row,3)">
            生成空调电费
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import { selectBillingZt } from "@/api/bill/index";
import { parseTime } from "@/utils/ruoyi.js";
 

const router = useRouter();
const loading = ref(false);
const ztBillList = ref([]);
const total = ref(0);

function getLastMonthStr() {
  const d = new Date();
  d.setDate(1); // 设置为当月第一天
  d.setMonth(d.getMonth() - 1);

  console.log(parseTime(d, "{y}-{m}"),parseTime(d),d.getMonth());
  return parseTime(d, "{y}-{m}");
}

// 默认查询参数，month 设置为上个月
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  nr: undefined,
  month: getLastMonthStr(),
});

function confirmFee(row,dflx) {
 if (dflx === 1) {
   router.push({
    name: "CreatedBillTrue",
    query: { zt: row.nr,  ...row,dflx }
  });}else if (dflx === 2) {
   router.push({
    name: "createdCheckBill",
    query: { zt: row.nr, ...row,dflx }
  });}else if (dflx === 3) {
   router.push({
    name: "excport",
    query: { zt: row.nr, ...row,dflx }
  });}
}

function getList() {
  loading.value = true;
  selectBillingZt({ ...queryParams })
    .then((res) => {
      ztBillList.value = res.data?.list || [];
      total.value = res.data?.total || 0;
      loading.value = false;
    })
    .catch(() => {
      loading.value = false;
    });
}

function handleQuery() {
  queryParams.pageNum = 1;
  getList();
}

function resetQuery() {
  queryParams.nr = undefined;
  queryParams.month = dayjs().subtract(1, "month").format("YYYY-MM");
  queryParams.pageNum = 1;
  getList();
}

onMounted(() => {
  getList();
});
</script>